<template>
  <div class="email-container flight-info-content">
    <span class="title mb-8">Departure Airport</span>

    <a-form-model layout="inline" style="margin-top:8px">
      <a-form-model-item label="Airport Code" class="mr-16">
        <airportList2
          v-model="search.dep"
          mode="default"
          placeholder="机场码"
          :data-source="listAirportData"
          style="width: 240px"
          :showSearch="true"
          @changeT="changeCodeHandler"
        />
      </a-form-model-item>
      <a-form-model-item label="Airport Name" class="mr-16">
        <a-input
          v-model="search.name"
          placeholder="请输入机场名称"
          style="width: 240px"
        />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="default" @click="clearHandle()" :loading="loading">
          清除
        </a-button>
        <a-button
          type="primary"
          class="ml-8"
          @click="addHandle()"
          :loading="loading"
        >
          添加
        </a-button>
      </a-form-model-item>
    </a-form-model>

    <div>
      <a-table
        size="small"
        :columns="airColumns"
        :pagination="false"
        :row-key="(row, index) => index"
        :data-source="departureAirport"
        style="margin-top:16px"
      />
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from "vuex";
import airportList2 from "@/pages/components/airportList2";
export default {
  props: ["airTitle"],
  components: {
    airportList2,
  },
  data() {
    return {
      search: {
        threeCode: undefined,
        name: "",
      },
      loading: false,
      airColumns: [
        {
          title: "机场码",
          dataIndex: "threeCode",
          key: "threeCode",
          width: 100,
        },
        {
          title: "机场名",
          dataIndex: "name",
          key: "name",
          width: 100,
        },
        {
          title: "城市名字",
          dataIndex: "city",
          key: "city",
          width: 100,
        },
        {
          title: "操作",
          align: "left",
          dataIndex: "option",
          width: 148,
          customRender: (value, record, index) => {
            const { id } = record;
            return [
              <a-popconfirm
                title="确认删除此项?"
                ok-type="danger"
                ok-text="确认"
                cancel-text="取消"
                onConfirm={() => this.delItemHandler(record)}
              >
                <a-button type="link">删除</a-button>
              </a-popconfirm>,
              // <a-button type='primary' size='small' ghost>版本管理</a-button>
            ];
          },
        },
      ],
    };
  },
  mounted() {
    const emailRow = JSON.parse(localStorage.getItem("emailRow") ?? "{}");

    if (Object.values(emailRow)?.length > 0) {
      const dep = emailRow.airport?.filter((item) => item.depOrArr === "dep");
      dep.forEach((item) => {
        item.name = item.airportName;
        item.threeCode = item.airportCode;
        item.city = item.city;
      });
      this.setState({ key: "departureAirport", payload: dep });
    }
  },
  computed: {
    ...mapState("emailNotification", ["departureAirport", 'notificationService']),
    ...mapState("eventMonitoring", ["listAirportData", "listAirportLoading"]),
    // ...mapState("fraMonitoring", ["depListFilter"]),
  },
  methods: {
    ...mapActions("emailNotification", ["getAirportDetail"]),
    ...mapMutations("emailNotification", ["setState"]),

    clearHandle() {
      this.search = {};
      this.setState({ key: "departureAirport", payload: [] });
    },
    changeCodeHandler(nv) {
      this.search.name =
        this.listAirportData.find((item) => item.threeCode === nv)?.name ?? "";
    },
    async addHandle() {
      this.loading = true;
      await this.getAirportDetail({ ...this.search, statu: 1 });
      this.loading = false;
    },
    delItemHandler(recode) {
      const aIndex = this.departureAirport.findIndex(
        (item) => item.threeCode === recode.threeCode
      );
      const nd = [...this.departureAirport];
      nd.splice(aIndex, 1);
      this.setState({ key: "departureAirport", payload: [...nd] });

      const delId = this.notificationService.airport.find(
        (item) => item.airportCode === recode.threeCode
      ).airportId;
      const itemIds = [...this.notificationService.departureAirportIds].filter(
        (item) => item !== delId
      );
      const airList = [...this.notificationService.airport].filter(
        (item) => item.airportId !== delId
      );

      this.setState({
        key: "notificationService",
        payload: {
          ...this.notificationService,
          departureAirportIds: [...itemIds],
        },
      });
      this.setState({
        key: "notificationService",
        payload: { ...this.notificationService, airport: [...airList] },
      });
    },
  },
};
</script>
